<template>
  <view>
    <view class="header">
      <view class="back" @click="back()">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text>详情</text>
    </view>

    <interact-box :item='interactInfo' pid=0 @changeCollect="changeCollect($event)"
      @changeDianzan="changeDianzan($event)" @open='open()'></interact-box>

    <view class="comment-container">
      <block v-for="(item,index) in commentInfo" :key="index">
        <comment-box :item='item' @changeCommentDianzan="changeCommentDianzan($event)"></comment-box>
      </block>
      <view class="end">
        已加载完毕
      </view>
    </view>

    <uni-popup ref="popup" type="bottom">
      <view class="comment-inp" :style="{bottom: activeHeight + 'px'}">
        <textarea class="inp" maxlength="50" placeholder="发一条友善的评论吧" :adjust-position="false" @focus="focusHandle"
          @blur="blurHandle" v-model="commentContent"></textarea>
        <view class="send" @click="send()">
          发送
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        dianzanPic: '/static/dianzan.png',
        collectPic: '/static/shoucang.png',
        activeHeight: 0,
        postId: '',
        interactInfo: {},
        commentInfo: [],
        commentContent: ''
      };
    },
    onLoad(options) {
      this.getInteractInfo(options.postId)
      this.getCommentInfo(options.postId)
      this.postId = options.postId
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getInteractInfo(postId) {
        const {
          data: {
            data
          }
        } = await uni.$http.get(`/users/post/detail/${postId}/${this.userInfo.studentId}`)
        this.interactInfo = data
      },
      async getCommentInfo(postId) {
        const obj = {
          page: 1,
          pagesize: 10
        }
        const {
          data: {
            data
          }
        } = await uni.$http.post(`/users/post/page/comment/${postId}/${this.userInfo.studentId}`, obj)
        this.commentInfo = data.records
      },
      changeCollect(e) {
        if (this.interactInfo.postId == e.id) {
          this.interactInfo.collectionCount += e.count
          this.interactInfo.is_PostCollection += e.count
        }
      },
      changeDianzan(e) {
        if (this.interactInfo.postId == e.id) {
          this.interactInfo.thumbsCount += e.count
          this.interactInfo.is_PostThumbs += e.count
        }
      },
      changeCommentDianzan(e) {
        const that = this
        this.commentInfo.forEach((item, index) => {
          if (item.commentId === e.id) {
            that.commentInfo[index].thumbsCount += e.count
            that.commentInfo[index].is_CommentThumbs += e.count
          }
        })
      },
      open() {
        this.$refs.popup.open('bottom')
      },
      focusHandle(e) {
        this.activeHeight = e.detail.height
      },
      blurHandle(e) {
        this.activeHeight = 0
      },
      async send() {
        if (this.commentContent.trim() === '') return uni.$showMsg('内容不能位空！')
        await uni.$http.post(`/users/post/addComment?studentId=${this.userInfo.studentId}`, {
          uid: this.userInfo.studentId,
          postId: this.postId,
          content: this.commentContent
        })
        console.log(this.userInfo.studentId);
        this.commentContent = ''
        this.$refs.popup.close()
        uni.$showMsg('评论成功')
        this.getCommentInfo(this.postId)
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;

    .back {
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .comment-container {
    padding: 0 20rpx;

    .end {
      width: 100%;
      height: 120rpx;
      line-height: 120rpx;
      font-size: 32rpx;
      text-align: center;
      color: #666;
    }
  }

  .comment-inp {
    display: flex;
    align-items: center;
    position: fixed;
    background-color: #fff;
    padding: 20rpx;

    .inp {
      width: 550rpx;
      height: 150rpx;
      padding: 20rpx;
      border-radius: 10rpx;
      background-color: #eee;
    }

    .send {
      width: 120rpx;
      height: 80rpx;
      margin-left: 20rpx;
      padding: 5rpx 10rpx;
      text-align: center;
      line-height: 70rpx;
      border-radius: 10rpx;
      color: #fff;
      background-color: #01c3ff;
      box-sizing: border-box;
    }
  }
</style>